<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--    引入js文件-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<?php echo $data['appId'] ?>', // 必填，公众号的唯一标识
            timestamp: <?php echo $data['timestamp'] ?>, // 必填，生成签名的时间戳
            nonceStr: '<?php echo $data["nonceStr"] ?>', // 必填，生成签名的随机串
            signature: '<?php echo $data["sign"] ?>',// 必填，签名
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'startRecord',
                'stopRecord',
                'playVoice',
                'uploadVoice',
                'downloadVoice',
                'pauseVoice',
                'stopVoice',
                'translateVoice',
                'scanQRCode',
            ] // 必填，需要使用的JS接口列表

        });
        //手册第四步 步骤四：通过ready接口处理成功验证
        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            // .1获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
            wx.onMenuShareAppMessage({
                title: '如何将信息分享给朋友',
                desc: '教你在 wx.ready(function()怎么写接口', // 分享描述
                link: '<?php echo $data["url"]; ?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974283304&di=6240a7705d87a223fd7a3f57da51843a&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd439b6003af33a87433692cfca5c10385243b588.jpg', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
// 用户点击了分享后执行的回调函数
                }
            });
            // 分享朋友End
            //分享朋友圈
            wx.onMenuShareTimeline({
                title: '朋友圈分享', // 分享标题
                link: '<?php $data["url"] ?>', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532972551327&di=89063decc49947d20bd61f860e15d869&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                },
            });
        });
    </script>

    <script>
        $(function () {
            var urls = [
                'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1417302094,2168719493&fm=27&gp=0.jpg',
                'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1441060208,382605833&fm=27&gp=0.jpg',
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1218658302,3556024496&fm=27&gp=0.jpg',
                'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=318969663,4254793838&fm=27&gp=0.jpg'
            ];
            var html = '';
            for (var i = 0; i < urls.length; i++) {
                html += '<img src="' + urls[i] + '" onclick="chakan(this)" style="width:100%;">';
            }
            $('.qiang').html(html);
        })

        function paizhao() {
            //图像接口
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    //设置某个图片的src属性
                    // $('.zhaopian').attr('src',localIds);

                    // 0731
                    //上传图片接口
                    wx.uploadImage({
                        localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            //下载图片
                            wx.downloadImage({
                                serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    var localId = res.localId; // 返回图片下载后的本地ID
                                    $('.zhaopian').attr('src', localId);
                                }
                            });
                        }
                    });

                }
            });
        }

        function chakan(el) {
            var urls = [
                'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1417302094,2168719493&fm=27&gp=0.jpg',
                'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1441060208,382605833&fm=27&gp=0.jpg',
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1218658302,3556024496&fm=27&gp=0.jpg',
                'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=318969663,4254793838&fm=27&gp=0.jpg'
            ];
            //获取当前点击的图片的src属性值
            var src = $(el).attr('src');
            wx.previewImage({
                current: src, // 当前显示图片的http链接
                urls: urls // 需要预览的图片http链接列表
            });
        }

        // 录音方法
        function recording() {
            // 开始录音接口
            wx.startRecord();
        }

        // 停止录音
        var luyin = '';

        function stopRecord() {
            wx.stopRecord({
                success: function (res) {
                    luyin = res.localId;
                    //上传录音接口
                    wx.uploadVoice({
                        localId: luyin, // 需要上传的音频的本地ID，由stopRecord接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回音频的服务器端ID
                            //下载录音接口
                            wx.downloadVoice({
                                serverId: serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    var localId = res.localId; // 返回音频的本地ID
                                    wx.playVoice({
                                        localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
                                    });
                                }
                            });
                        }
                    });
                }
            });
        }

        // 播放录音
        function playVoice() {
            wx.playVoice({
                localId: luyin // 需要播放的音频的本地ID，由stopRecord接口获得
            });
        }

        //暂停播放接口
        function pauseVoice() {
            // alert(luyin);
            wx.pauseVoice({
                localId: luyin // 需要暂停的音频的本地ID，由stopRecord接口获得
            });
        }

        //停止播放
        function stopVoice(){
            alert(luyin);
            wx.stopVoice({
                localId: luyin // 需要停止的音频的本地ID，由stopRecord接口获得
            });
        }
        //语音输入
        function translateVoice(){
            wx.translateVoice({
                localId: luyin, // 需要识别的音频的本地Id，由录音相关接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    alert(res.translateResult); // 语音识别的结果
                }
            });
        }
        //微信扫一扫
        function scanQRCode(){
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    alert(result);
                }
            });
        }


    </script>


    <title>Document</title>
</head>
<body>
<h1>我是分享的页面</h1>
<h4 class="paizhao" onclick="paizhao()">我要拍照</h4>
<h4 class="recording" onclick="recording()">开始录音</h4>
<h4 class="stopRecord" onclick="stopRecord()">停止录音</h4>
<h4 class="playVoice" onclick="playVoice()">播放录音</h4>
<h4 class="" onclick="pauseVoice()">暂停播放</h4>
<h4 class="" onclick="stopVoice()">停止播放</h4>
<h4 class="" onclick="translateVoice()">语音输入</h4>
<h4 class="" onclick="scanQRCode()">扫一扫</h4>


<img src="" class="zhaopian" style="width: 100%;">

<p>下面的照片墙</p>
<div class="qiang">
</body>
</html>


//<!--    进入内容页编辑-->
//
<script>
    //        $(function() {
    //            // 定义模拟图片数据库
    //            var datas = [
    //                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974283304&di=6240a7705d87a223fd7a3f57da51843a&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd439b6003af33a87433692cfca5c10385243b588.jpg',
    //                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974668480&di=fa4e7b7d619bab5006a7218a3738cc53&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F3c6d55fbb2fb43165a73bbab2ca4462308f7d3f7.jpg',
    //                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974740731&di=c5b132ac9d4a03d2bf6ff07818dbdc7c&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg',
    //            ];
    //            // 将图片进行循环展示
    //            var html = '';
    //            for (i=0;i<datas.length;i++){
    //                html += '<img ser="'+datas[i]+'" onclick="chank(this)" style="width:100%;">';
    //            }
    //            $('.qiang').html(html);
    //        })
    //
    //        function paizhao() {
    //            wx.chooseImage({
    //                count: 1, // 默认9
    //                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    //                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    //                success: function (res) {
    //                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    //                    // 将class名为zhaopian的标签里面的localIds替换为src
    //                    $('.zhanpian').attr('src',localIds);
    //                }
    //            });
    //        }
    //
    //        function chakan(el){
    //            var urls = [
    //                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974283304&di=6240a7705d87a223fd7a3f57da51843a&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd439b6003af33a87433692cfca5c10385243b588.jpg',
    //                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974668480&di=fa4e7b7d619bab5006a7218a3738cc53&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F3c6d55fbb2fb43165a73bbab2ca4462308f7d3f7.jpg',
    //                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532974740731&di=c5b132ac9d4a03d2bf6ff07818dbdc7c&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg',
    //            ];
    //            var src = $(el).attr('src');
    //            wx.previewImage({
    //                current: 'src', // 当前显示图片的http链接
    //                urls: urls // 需要预览的图片http链接列表
    //            });
    //        }
